<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js 文件 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in letters"> {{item}} </li>
        </ul>
        <button @click="btn">按钮</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "Hello Vue",
                letters: ['a', 'b', 'c', 'd']
            },
            methods: {
                btn() {
                    // 1. push方法  响应式数据
                    // this.letters.push('aaa');

                    // 2. letters 通过索引值修改数组中元素 不是响应式数据
                    // this.letters[0] = 'bbbbb';

                    // 3. pop() 删除数组的最后一个元素 响应式数据

                    // 4. shift() 删除数组中的第一个元素 响应式数据

                    // 5. unshift() 在数组最前面添加元素

                    // 6. splice(第几个开始，删除几个，替换元素) 删除元素/插入元素/替换元素
                    // 删除元素：第二个参数传入你要删除的几个元素 如果没有传就是删除所有的
                    // 替换元素: 第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
                    // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
                }
            }
        });
    </script>
</body>

</html>